<template>
  <div class="jiezhen">
      <!-- <form action=""> -->

          <div class="titcon">
              <p>
              <label for="">扫码录入：</label><scan style="scan" @searchList="getzuo" :gogo="parentmsg"></scan> <span class="sao">{{rightmsg}}</span>
              </p>
          </div>
          <!-- 下面是显示药品的信息 -->
          <div class="mesgescon">
            <p>
              <!-- <label for="">供货商：</label> <search></search> -->
              <label for="">生产厂家：</label><input type="text" v-model="addjson.supplier"><label for="">批文号：</label><input  v-model="addjson.coding" type="text">
              <!-- <label for="">入库日期：</label><input type="date" value="2018-03-20"> -->
            </p>
           <p><label for="">商品名称：</label><input  v-model="addjson.name" type="text"><label for="">通用名称：</label><input  v-model="addjson.name_intro" type="text"></p>
           <p><label for="">规&nbsp;&nbsp;&nbsp;格：</label><input type="text"  v-model="addjson.specification"><label for="">剂&nbsp;&nbsp;&nbsp;型：</label><input v-model="addjson.unit" type="text"></p>
           <p> <label>供货商：</label><input type="text"  v-model="addjson.source"><label>药品简写：</label><input type="text"  v-model="addjson.spell_intro"></p>

          </div>
          <div class="pricenum">
           <p><label for="">单&nbsp;&nbsp;&nbsp;价：</label><input   v-model="addjson.in_price" type="text"><label for="">处方价：</label><input   v-model="addjson.out_price" type="text"></p>
           <p><label for="">数&nbsp;&nbsp;&nbsp;量：</label><input type="text"    v-model="addjson.num"><label for="">库&nbsp;&nbsp;&nbsp;存：</label><input type="text" v-model="addjson.nums">
         
           <!-- <label for="">单&nbsp;&nbsp;&nbsp;位：</label><input type="text"> -->
           </p>
           <p>
              <label for="">生产日期：</label><input type="date"     v-model="addjson.produce_time" ><label for="">有效期：</label><input type="date"    v-model="addjson.expired_time">
            <!-- 合&nbsp;&nbsp;&nbsp;计：</label><input type="text" v-model="addjson.num*addjson.in_price"> -->
           
           </p>
           
           <p><input type="button" class="btn" @click="save" value="保存">
           </p>

          </div>

            <div>
				<input type="text" placeholder="查询药品"  @keyup="gets($event)" class="search">
				<!-- <datalist id="cars">
                <option v-for="item in searchlist" :value="item"></option>
            </datalist> -->

       <span class="fr right_btn">
        <input type="button" class="btn" @click="windowprint"  value="打印">
        <!-- <input type="button" class="btn" value="打印"> -->
       </span>

			</div>
			<div id="tablepage">
				<table>
					<tr>
						<th   style="width:28px;">序号</th>
            <th style="width:95px;">药品编码</th>
            <th  style="width:140px;">生产厂家</th>
            	<th  style="width:130px;">批文字号</th>
						<th   style="width:100px;">药品名称</th>
						<th>通用名</th>
						<th  style="width:30px;">规格</th>
						<th   style="width:30px;">剂型</th>
						<th>单价</th>
            <th>处方价</th>
            <th   style="width:30px;">数量</th>
             <th   style="width:130px;">供货商</th>
              <th>简写</th>
            	<th  style="width:70px;">生产日期</th>
						<th  style="width:70px;">有效期</th>
            <th>库存</th>
            <!-- <th>合计</th> -->
						<th>操作</th>
					</tr>
					<tr v-cloak v-for="(item, index) of slist">
						<td>{{index+1}}</td>
						<td>{{item.barcode}}</td>
						<td>{{item.supplier}}</td>
						<td>{{item.coding}}</td>
						<td>{{item.name}}</td>
						<td>{{item.name_intro}}</td>
						<td>{{item.specification}}</td>
						<td>{{item.unit}}</td>
            <td>{{item.in_price}}</td>
						<td>{{item.out_price}}</td>
            <td>{{item.num}}</td>
             <td>{{item.source}}</td>
              <td>{{item.spell_intro}}</td>
            <td v-if="item.produce_time">{{item.produce_time.substring(0,10)}}</td>
            <td v-else></td>
						<td v-if="item.expired_time">{{item.expired_time.substring(0,10)}}</td>
            <td v-else></td>
            <td>{{item.num}}</td>

            <!-- <td>{{item.in_price*item.num}}</td>这里是合计 -->

						<td>
							<a href="javascript:;" @click="showOverlay(index)">修改</a> <a href="javascript:;" @click="del(index,item.drug_id)">删除</a>
						</td>
					</tr>
				</table>
			</div>
			<comein :list='selectedlist' :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></comein>
   </div>
</template>


<script>
import _ from "lodash";
import scan from "@/components/scan"; //扫描搜索
import search from "@/components/search";
import comein from "@/components/jiezhenmodel";
import $ from "jquery";
import "jQuery.print";
export default {
  name: "drugs",
  components: {
    search,
    comein,
    scan
  },
  mounted() {
    //测试实时监听更新数据，与后台接口联系
  },
  data() {
    return {
      parentmsg:"0",
      rightmsg: "请扫码",
      addjson: {
        supplier: "",
        coding: "",
        name: "",
        name_intro: "",
        specification: "",
        unit: "",
        in_price: "",
        out_price: "",
        num: "",
        supplier: "",
        spell_intro: "",
        source:"",          
        produce_time: "",
        expired_time: "",
        nums: ""
      },
      isActive: false,
      selected: -1,
      selectedlist: {},
      slist: [],
      searchlist: [],
      list: []
    };
  },
  created() {
    //console.log(Date.now());
    this.setSlist(this.list);
  },
  mounted() {
    this.$nextTick(function() {
      this.getList("");
    });
  },
  computed: {
    //计算属性
  },
  methods: {
    windowprint() {
      $("#tablepage").print();
    },
    getzuo(res) {
      if (res.coding) {
        this.rightmsg = "该药品已存在";
        this.addjson = {
          supplier: res.supplier,
          coding: res.coding,
          name: res.name,
          name_intro: res.name_intro,
          specification: res.specification,
          unit: res.unit,
          in_price: res.in_price,
          out_price: res.out_price,
          num: res.num,
           source:res.source,
           supplier:  res.supplier,
        spell_intro:  res.spell_intro,
          produce_time: res.produce_time,
          expired_time: res.expired_time,
          nums: res.nums
        };
      } else {
        this.rightmsg = "该药品是初次入库";
        this.addjson = {
          supplier: "",
          coding: "",
          name: "",
          name_intro: "",
          specification: "",
          unit: "",
          in_price: "",
          out_price: "",
          num: "",
          nums: "",
           supplier:"",
        spell_intro: "",
          expired_time: "",
       source:"",
           produce_time: "",
          nums: "",
          barcode: res
        };
      }
    },
    getList(name) {
      //获取也可以是查询//获取和搜索公用一个接口
      // let params = new URLSearchParams();
      // params.append("name", name);
      // params.append("id", JSON.parse(localStorage.user).userid);
      // params.append("level", JSON.parse(localStorage.user).level);

      this.$http
        .post(
          "http://medical.qingguo188.com/user-drug-warehouse/showlist",
          {
            name: name,
            id: JSON.parse(localStorage.user).userid,
            level: JSON.parse(localStorage.user).level
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(
          rester => {
            console.log(rester.data);
            if (rester.data.$message.length > 0) {
              for (let i = 0; i < rester.data.$message.length; i++) {
                this.list.push({
                  barcode: rester.data.$message[i].barcode,
                  supplier: rester.data.$message[i].supplier,
                  coding: rester.data.$message[i].coding,
                  name: rester.data.$message[i].name,
                  name_intro: rester.data.$message[i].name_intro,
                  specification: rester.data.$message[i].specification,
                  unit: rester.data.$message[i].unit,
                  in_price: rester.data.$message[i].in_price,
                  out_price: rester.data.$message[i].out_price,
                  num: rester.data.$message[i].num,
                   supplier:  rester.data.$message[i].supplier,
        spell_intro:  rester.data.$message[i].spell_intro,
                  expired_time: rester.data.$message[i].expired_time,
                   source: rester.data.$message[i].source,
                   nums: rester.data.$message[i].nums,
                    produce_time: rester.data.$message[i].produce_time,
                  drug_id: rester.data.$message[i].drug_id,
                  spell_intro: rester.data.$message[i].spell_intro,
                  zidian_id: rester.data.$message[i].zidian_id,
                  shape: rester.data.$message[i].shape
                });
              }
              this.setSlist(this.list);
            } else {
              this.$layer.msg("暂无结果");
            }

            //  console.log(this.list);
          },
          function() {
            //this.$layer.alert("网络错误！");
          }
        );
    },
    //保存添加药品
    save() {
      //console.log(this.addjson);
      // let params = new URLSearchParams();
      // params.append("id", JSON.parse(localStorage.user).userid);
      // params.append("level", JSON.parse(localStorage.user).level);
      // params.append("shape", this.addjson.shape);
      // params.append("supplier", this.addjson.supplier);
      // params.append("name", this.addjson.name);
      // params.append("name_intro", this.addjson.name_intro);
      // params.append("specification", this.addjson.specification);
      // params.append("unit", this.addjson.unit);
      // params.append("in_price", this.addjson.in_price);
      // params.append("out_price", this.addjson.out_price);
      // params.append("expired_time", this.addjson.expired_time);
      // params.append("coding", this.addjson.coding);
      // params.append("num", this.addjson.num);
      // params.append("barcode", this.addjson.barcode);

      // console.log(params);
      this.$http
        .post(
          "http://medical.qingguo188.com/user-drug-warehouse/create",
          {
            id: JSON.parse(localStorage.user).userid,
            level: JSON.parse(localStorage.user).level,
            shape: this.addjson.shape,
            supplier: this.addjson.supplier,
            name: this.addjson.name,
            name_intro: this.addjson.name_intro,
            specification: this.addjson.specification,
            unit: this.addjson.unit,
            in_price: this.addjson.in_price,
            out_price: this.addjson.out_price,
            expired_time: this.addjson.expired_time,
                     supplier:  this.addjson.supplier,
        spell_intro:  this.addjson.spell_intro,
              produce_time: this.addjson.produce_time,
               source:this.addjson.source,
            coding: this.addjson.coding,
            num: this.addjson.num,
            nums: this.addjson.nums,
            barcode: this.addjson.barcode
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(
          rester => {
            console.log(rester.data);
            this.$layer.alert("保存成功！");
            this.list = [];
            this.getList("");
            this.addjson = {
              supplier: "",
              coding: "",
              name: "",
              name_intro: "",
              specification: "",
              unit: "",
              in_price: "",
              out_price: "",
              num: "",
              supplier: "",
        spell_intro:  "",
              expired_time: "",
              source:"",
               produce_time: "",
              nums: "",
              barcode: ""
            };

            this.parentmsg=Number(this.parentmsg)+1;
            // this.$layer.alert("保存成功", function() {
            //   location.reload();
            // });
            //  console.log(this.list);
          },
          function() {
            //this.$layer.alert("网络错误！");
          }
        );
    },
    // 修改数据
    showOverlay(index) {
      this.selected = index;
      this.selectedlist = this.list[index];
      this.changeOverlay();
    },
    //下面是修改
    modify(arr) {
      // if (this.selected > -1) {//修改
      // console.log("修改")

      //   this.$set(this.list, this.selected, arr);
      // } else {//
      //   this.list.push(arr);
      // }
      //let params = new URLSearchParams();
      // params.append("name", arr.name);
      // params.append("name_intro", arr.name_intro);
      // params.append("specification", arr.specification);
      // params.append("unit", arr.unit);
      // params.append("shape", arr.shape);
      // params.append("supplier", arr.supplier);
      // params.append("barcode", arr.barcode);
      // params.append("spell_intro", arr.spell_intro);
      // params.append("num", arr.num);
      // params.append("in_price", arr.in_price);
      // params.append("out_price", arr.out_price);
      // params.append("expired_time", arr.expired_time);

      // params.append("coding", arr.coding);
      // params.append("zidian_id", arr.zidian_id);
      // params.append("drug_id", arr.drug_id);

      this.$http
        .post(
          "http://medical.qingguo188.com/user-drug-warehouse/update",
          {
            name: arr.name,
            name_intro: arr.name_intro,
            specification: arr.specification,
            unit: arr.unit,
            shape: arr.shape,
            supplier: arr.supplier,
            barcode: arr.barcode,
            spell_intro: arr.spell_intro,
            num: arr.num,
             nums: arr.nums,
            in_price: arr.in_price,
            out_price: arr.out_price,
            expired_time: arr.expired_time,
            
              source: arr.source,
                produce_time: arr.produce_time,
supplier: arr.supplier,
        spell_intro:  arr.spell_intro,
            coding: arr.coding,
            zidian_id: arr.zidian_id,
            drug_id: arr.drug_id
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(
          rester => {
            this.$set(this.list, this.selected, arr);
             console.log(this.list);
          },
          function() {
            //this.$layer.alert("网络错误！");
          }
        );

      this.setSlist(this.list);
      this.changeOverlay();
    },
    add: function() {
      this.selectedlist = {
        username: "",
        tname: "",
        guige: "",
        danwei: "",
        jixing: "",
        compony: "",
        wenhao: "",
        pinyin: ""
      };
      this.isActive = true;
    },
    // delete list in index location
    del(index, id) {
      // let params = new URLSearchParams();
      // params.append("drug_id", id);
      this.$http
        .post(
          "http://medical.qingguo188.com/user-drug-warehouse/delete",
          {
            drug_id: id
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(
          rester => {
            this.$layer.alert("删除成功！");
          },
          function() {
            //this.$layer.alert("网络错误！");
          }
        );

      this.list.splice(index, 1);
      this.setSlist(this.list);
    },
    changeOverlay() {
      this.isActive = !this.isActive;
    },
    // 获取需要渲染到页面中的数据
    setSlist(arr) {
      this.slist = JSON.parse(JSON.stringify(arr));
    },
    gets: _.debounce(function(ev) {
      console.log(ev.target.value);
      if (ev.target.value) {
        this.list = [];
        this.setSlist(this.list);
        this.getList(ev.target.value);
      } else {
        this.list = [];
        this.setSlist(this.list);
        this.getList("");
      }
    }, 1000)
    // 搜索
    // search(e) {
    //   var v = e.target.value,
    //     self = this;
    //   self.searchlist = [];
    //   if (v) {
    //     var ss = [];
    //     // 过滤需要的数据
    //     this.list.forEach(function(item) {
    //       if (item.username.indexOf(v) > -1||item.pinyin.indexOf(v) > -1) {
    //         if (self.searchlist.indexOf(item.username) == -1||self.searchlist.indexOf(item.pinyin) == -1) {
    //           self.searchlist.push(item.username);
    //         }
    //         ss.push(item);
    //       } else if (item.tname.indexOf(v) > -1) {
    //         if (self.searchlist.indexOf(item.tname) == -1) {
    //           self.searchlist.push(item.tname);
    //         }
    //         ss.push(item);
    //       }
    //     });
    //     this.setSlist(ss); // 将过滤后的数据给了slist
    //     this.list = ss;
    //   } else {
    //     // 没有搜索内容，则展示全部数据
    //     this.setSlist(this.list);
    //   }
    // }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .jiezhen {
  background: #f1f1f1 !important;
} */

.sao {
  margin-left: 5px;
  color: #999999;
}
.red {
  color: red;
}
.jiezhen {
  width: 1200px;
  margin: 0 auto;
}
.jiezhen p {
  margin: 10px 0;
}
button {
  margin-right: 20px;
  height: 30px;
  padding: 0 10px;
  border-radius: 4px;
  box-shadow: 1px 1px 5px #333333;
}
.button_group {
  padding: 5px 50px;
  overflow: hidden;
}
select {
  min-width: 60px;
  height: 30px;
  line-height: 30px;
}
.titcon,
.mesgescon {
  border-bottom: 1px solid #ffffff;
}
.mesgescon label,
.pricenum label {
  display: inline-block;
  width: 70px;
}
.mesgescon input[type="text"],
.pricenum input[type="text"] {
  margin-right: 20px;
}

.redcloer {
  background: #ffdada;
}
.gray {
  background: gray;
}
input[type="date"] {
  height: 30px;
  line-height: 30px;
  border: 1px solid #cccccc;
  border-radius: 5px;
}
[v-cloak] {
  display: ncompony;
}
input[type="button"] {
  margin: 0 10px;
}
table {
  border: 1px solid #ccc;
  padding: 0;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 10px;
  width: 100%;
}

table td,
table th {
  border: 1px solid #ccc;
  background: #fff;
  text-align: center;
  height: 30px;
  line-height: 30px;
}
td {
  font-size: 12px;
}
table th:first-child {
  width: 50px;
}

.container,
.st {
  width: 1200px;
  margin: 10px auto 0;
  font-size: 13px;
  font-family: "Microsoft YaHei";
}
.right_btn {
  margin-bottom: 10px;
}
input[type=date]{
  width:179px; 
  margin-right: 20px;
}
</style>
